<template>
  <div class="currentCom">
    <!-- <div class="item" v-for="(item,index) in route" :key="index" @click="jumpWhere(item,index)" :class="{active:index === activeIndex}">{{item.name}}</div> -->
    <div class="item" :class="curSelect.flag == 1 && curSelect.url == item.url ? 'activeMenu' : ''" @click="itemClick(item,1,index,null)" v-for="(item,index) in routeData" :key="index">
      <div class="sub-menu">
        <div class="title-wrap">
          <div class="inner">
            <div class="title">
              <span class="icon"><i class="el-icon-s-tools"></i></span>
              <span class="name">{{item.name}}</span>
            </div>
            <div class="icon" v-if="item.children.length > 0">
              <i class="el-icon-arrow-right" :class="(item.show && item.children.length > 0)  ? 'activeIcon' : 'activeIconDeg0'"></i>
            </div>
          </div>
        </div>
        <div class="menu-child" v-show="item.children.length > 0 && item.show">
          <div class="child-wrap" :class="curSelect.flag == 2 && curSelect.url == ite.url ? 'activeMenu' : ''" @click.stop="itemClick(ite,2,index,inx)" v-for="(ite,inx) in item.children" :key="inx">
            <div class="title-wrap">
              <div class="inner">
                <div class="title">
                  <span class="icon"><i class="el-icon-s-tools"></i></span>
                  <span class="name">{{ite.name}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routeData: [
        {
          url: '/',
          name: '控制台',
          show: false,
          children: []
        },
        {
          url: '',
          name: '用户管理',
          show: false,
          children: [
            {
              url: '/a',
              name: 'xxx01'
            },
            {
              url: '/b',
              name: 'xxx02'
            },
            {
              url: '/c',
              name: 'xxx03'
            }
          ]
        },
        {
          url: '',
          name: '静态演示',
          show: false,
          children: [
            {
              url: '/test/table',
              name: '表格'
            },
            {
              url: '/test/form',
              name: '表单'
            },
            {
              url: '/test/tmp',
              name: '模板'
            } 
          ]
        }

      ],
      curSelect: ""
    }
  },
  created() {
    this.curSelect = this.$store.state.menuSelect || {url:'/',flag:1,index:0,inx:null}
    if(this.curSelect.flag == 2){
      this.routeData[this.curSelect.index].show = true
    }
  },
  methods: {
    itemClick(data, flag,index,inx) { 
      console.log(JSON.stringify(data), flag);
      if (flag == 1) {
        data.show = !data.show
      }
      if (data.url) {
        this.$router.push(data.url)
        var curSelect = {
          url: data.url,
          flag,
          index:index,
          inx:inx
        }
        this.curSelect = curSelect
        this.$store.commit("menuSelect",curSelect)
        console.log("记录："+JSON.stringify(curSelect))
      }
      

    }
  }
}
</script>

<style scoped lang='scss'>
*{
  user-select: none;
}
.activeMenu{
  color: #409eff !important;
  transition: all linear 0.2s;

}
.activeIcon{
  transform:rotate(90deg);
  transition: all linear 0.2s;
}
.activeIconDeg0{
  transform:rotate(0deg);
  transition: all linear 0.2s;
}
.currentCom {
  height: 100%;
  overflow-y: auto;
  font-size: 14px;
  .item {
    color: #303133;
      
    .sub-menu {
      cursor: pointer;
      .title-wrap {
        .inner {
          height: 56px;
          line-height: 56px;
          padding: 0 10px 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .title {
            .icon {
              margin-right: 5px;
            }
          }
        }
        &:hover {
          background: rgb(236, 236, 236);
        }
      }
      .menu-child {
        .child-wrap {
          background-color: rgb(245, 245, 245);
          color: rgb(48, 49, 51);
          .inner {
            padding: 0 10px 0 40px;
          }
        }
      }
    }
  }
}
</style>